<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>用户资料 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    /* 页面容器 */
    .profile-page {
      display: none;
      height: 100vh;
      flex-direction: column;
      background-color: var(--light);
    }
    
    .profile-page.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    
    .dark .header-title {
      color: var(--white);
    }
    
    .header-action {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .header-action {
      color: var(--white);
    }
    
    .back-btn {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
    }
    
    .dark .back-btn {
      color: var(--white);
    }
    
    /* 资料头部区域 */
    .profile-header {
      background: linear-gradient(135deg, #3B82F6, #60A5FA);
      padding: 30px 16px 60px;
      color: white;
      position: relative;
      text-align: center;
    }
    
    .dark .profile-header {
      background: linear-gradient(135deg, #1E40AF, #3B82F6);
    }
    
    .profile-avatar-container {
      position: absolute;
      left: 50%;
      bottom: -50px;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid var(--white);
    }
    
    .dark .profile-avatar-container {
      border-color: #111827;
    }
    
    .profile-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .profile-status {
      position: absolute;
      bottom: 3px;
      right: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--secondary);
      border: 2px solid var(--white);
    }
    
    .dark .profile-status {
      border-color: #111827;
    }
    
    .status-offline {
      background-color: var(--dark-gray);
    }
    
    /* 资料内容区域 */
    .profile-content {
      flex: 1;
      overflow-y: auto;
      padding-top: 60px;
      background-color: var(--white);
    }
    
    .dark .profile-content {
      background-color: #111827;
    }
    
    .profile-name-container {
      text-align: center;
      padding: 0 16px 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .profile-name-container {
      border-bottom-color: var(--border-dark);
    }
    
    .profile-name {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .dark .profile-name {
      color: var(--white);
    }
    
    .profile-meta {
      color: var(--dark-gray);
      font-size: 14px;
    }
    
    .dark .profile-meta {
      color: #9CA3AF;
    }
    
    .profile-actions {
      display: flex;
      gap: 10px;
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .profile-actions {
      border-bottom-color: var(--border-dark);
    }
    
    .profile-action-btn {
      flex: 1;
      padding: 12px;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--border-light);
      color: var(--dark);
    }
    
    .dark .btn-outline {
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    .btn-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--light);
      color: var(--dark);
      border: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .dark .btn-icon {
      background-color: #1F2937;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    /* 资料详情区域 */
    .profile-details {
      padding: 16px;
    }
    
    .detail-section {
      margin-bottom: 24px;
    }
    
    .section-title {
      font-size: 14px;
      color: var(--dark-gray);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .dark .section-title {
      color: #9CA3AF;
    }
    
    .detail-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .detail-item {
      border-bottom-color: var(--border-dark);
    }
    
    .detail-item:last-child {
      border-bottom: none;
    }
    
    .detail-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: rgba(59, 130, 246, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .detail-info {
      flex: 1;
    }
    
    .detail-label {
      font-size: 14px;
      color: var(--dark-gray);
      margin-bottom: 2px;
    }
    
    .dark .detail-label {
      color: #9CA3AF;
    }
    
    .detail-value {
      font-size: 16px;
      font-weight: 500;
    }
    
    .dark .detail-value {
      color: var(--white);
    }
    
    /* 动态和相册预览 */
    .media-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }
    
    .media-item {
      aspect-ratio: 1/1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    
    .media-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .media-count {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 卡片风格 */
    .card-style .profile-content {
      border-radius: 24px 24px 0 0;
      margin-top: -24px;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .card-style .detail-item {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 8px;
      padding: 14px;
      border: 1px solid var(--border-light);
    }
    
    .card-style .detail-item:last-child {
      margin-bottom: 0;
    }
    
    .card-style .detail-section {
      margin-bottom: 16px;
    }
    
    .card-style .profile-actions {
      padding: 16px;
      background-color: transparent;
    }
    
    .card-style.dark .profile-content {
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card-style.dark .detail-item {
      background-color: #1F2937;
      border-color: var(--border-dark);
    }
    
    /* 简约风格 */
    .minimal-style .profile-header {
      padding: 20px 16px 50px;
    }
    
    .minimal-style .profile-avatar-container {
      width: 80px;
      height: 80px;
      bottom: -40px;
    }
    
    .minimal-style .profile-content {
      padding-top: 50px;
    }
    
    .minimal-style .profile-name {
      font-size: 20px;
    }
    
    .minimal-style .profile-actions {
      padding: 12px 16px;
    }
    
    .minimal-style .profile-action-btn {
      padding: 10px;
      font-size: 14px;
    }
    
    .minimal-style .detail-item {
      padding: 10px 0;
    }
    
    .minimal-style .detail-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    
    .minimal-style .detail-value {
      font-size: 15px;
    }
    
    .minimal-style .section-title {
      display: none;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .detail-item, .media-item {
      animation: fadeIn 0.2s ease forwards;
    }
    
    .detail-item:nth-child(1) { animation-delay: 0.1s; }
    .detail-item:nth-child(2) { animation-delay: 0.2s; }
    .detail-item:nth-child(3) { animation-delay: 0.3s; }
    .detail-item:nth-child(4) { animation-delay: 0.4s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">资料页样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式资料页 -->
  <div class="profile-page active" id="defaultPage">
    <!-- 顶部导航 -->
    <div class="page-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="header-title">个人资料</div>
      <button class="header-action" aria-label="更多选项">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    
    <!-- 资料头部区域 -->
    <div class="profile-header">
      <div class="profile-avatar-container">
        <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="profile-avatar">
        <div class="profile-status"></div>
      </div>
    </div>
    
    <!-- 资料内容区域 -->
    <div class="profile-content">
      <div class="profile-name-container">
        <div class="profile-name">张设计师</div>
        <div class="profile-meta">UI/UX设计师 · 在线</div>
      </div>
      
      <div class="profile-actions">
        <button class="profile-action-btn btn-primary">
          <i class="fa fa-comment"></i> 发消息
        </button>
        <button class="profile-action-btn btn-outline">
          <i class="fa fa-user-plus"></i> 关注
        </button>
        <button class="btn-icon">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="profile-details">
        <div class="detail-section">
          <div class="section-title">基本信息</div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-briefcase"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">职业</div>
              <div class="detail-value">UI/UX设计师 @ 创意科技</div>
            </div>
          </div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-map-marker"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">所在地</div>
              <div class="detail-value">北京市 朝阳区</div>
            </div>
          </div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-graduation-cap"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">教育经历</div>
              <div class="detail-value">中央美术学院 视觉传达设计</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="section-title">个人简介</div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-info"></i>
            </div>
            <div class="detail-info">
              <div class="detail-value">热爱设计的创作者，专注于用户体验与交互设计，喜欢探索新的设计趋势和工具。</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="section-title">社交链接</div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-globe"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">个人网站</div>
              <div class="detail-value">zhangdesign.com</div>
            </div>
          </div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-dribbble"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">Dribbble</div>
              <div class="detail-value">dribbble.com/zhang</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="section-title">动态与相册</div>
          
          <div class="detail-item">
            <div class="detail-icon">
              <i class="fa fa-image"></i>
            </div>
            <div class="detail-info">
              <div class="detail-label">相册</div>
              <div class="media-grid">
                <div class="media-item">
                  <img src="https://picsum.photos/id/1015/300/300" alt="相册图片1">
                </div>
                <div class="media-item">
                  <img src="https://picsum.photos/id/1016/300/300" alt="相册图片2">
                </div>
                <div class="media-item">
                  <img src="https://picsum.photos/id/1018/300/300" alt="相册图片3">
                  <div class="media-count">+8</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 深色模式资料页 -->
  <div class="profile-page dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格资料页 -->
  <div class="profile-page card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格资料页 -->
  <div class="profile-page minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 操作菜单弹窗 -->
  <div class="action-sheet-overlay" id="menuOverlay">
    <div class="action-sheet" id="menuSheet">
      <div class="action-title">资料操作</div>
      <div class="action-buttons">
        <button class="action-btn">
          <i class="fa fa-share-alt"></i>
          <span>分享资料</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-star-o"></i>
          <span>添加到星标好友</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-ban"></i>
          <span>加入黑名单</span>
        </button>
        <button class="action-btn destructive">
          <i class="fa fa-user-times"></i>
          <span>删除联系人</span>
        </button>
      </div>
      <button class="cancel-btn" id="cancelMenu">取消</button>
    </div>
  </div>
  
  <!-- 确认弹窗 -->
  <div class="modal-overlay" id="confirmModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">确认删除</div>
        <button class="modal-close" id="closeConfirmModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要删除这个联系人吗？删除后将无法恢复。</p>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelDelete">取消</button>
        <button class="modal-btn modal-btn-primary" id="confirmDelete">删除</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const profilePages = document.querySelectorAll('.profile-page');
    const backButtons = document.querySelectorAll('.back-btn');
    const moreActionButtons = document.querySelectorAll('.header-action:last-child');
    const actionButtons = document.querySelectorAll('.profile-action-btn, .btn-icon');
    const menuOverlay = document.getElementById('menuOverlay');
    const menuSheet = document.getElementById('menuSheet');
    const cancelMenu = document.getElementById('cancelMenu');
    const confirmModal = document.getElementById('confirmModal');
    const closeConfirmModal = document.getElementById('closeConfirmModal');
    const cancelDelete = document.getElementById('cancelDelete');
    const confirmDelete = document.getElementById('confirmDelete');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换页面样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        profilePages.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
        
        // 更新按钮引用
        updateButtonReferences();
      });
    });
    
    // 更新按钮引用（切换样式后）
    function updateButtonReferences() {
      const activePage = document.querySelector('.profile-page.active');
      
      // 重新绑定返回按钮事件
      const backBtn = activePage.querySelector('.back-btn');
      if (backBtn) {
        backBtn.addEventListener('click', goBack);
      }
      
      // 重新绑定更多操作按钮事件
      const moreBtn = activePage.querySelector('.header-action:last-child');
      if (moreBtn) {
        moreBtn.addEventListener('click', openMenuSheet);
      }
      
      // 重新绑定资料操作按钮事件
      activePage.querySelectorAll('.profile-action-btn, .btn-icon').forEach(btn => {
        btn.addEventListener('click', handleActionButton);
      });
    }
    
    // 返回功能
    function goBack() {
      alert('返回通讯录列表');
    }
    
    // 打开菜单操作弹窗
    function openMenuSheet() {
      menuOverlay.classList.add('active');
      menuSheet.classList.add('active');
    }
    
    // 关闭菜单操作弹窗
    function closeMenuSheet() {
      menuOverlay.classList.remove('active');
      menuSheet.classList.remove('active');
    }
    
    // 处理操作按钮点击
    function handleActionButton() {
      const actionText = this.textContent.trim();
      if (actionText.includes('发消息')) {
        alert('进入与张设计师的聊天界面');
      } else if (actionText.includes('关注')) {
        if (this.textContent.includes('关注')) {
          this.innerHTML = '<i class="fa fa-check"></i> 已关注';
          this.classList.remove('btn-outline');
          this.classList.add('btn-primary');
          alert('已关注张设计师');
        } else {
          this.innerHTML = '<i class="fa fa-user-plus"></i> 关注';
          this.classList.remove('btn-primary');
          this.classList.add('btn-outline');
          alert('已取消关注');
        }
      }
    }
    
    // 菜单操作事件绑定
    cancelMenu.addEventListener('click', closeMenuSheet);
    menuOverlay.addEventListener('click', closeMenuSheet);
    
    // 打开确认弹窗
    menuSheet.querySelector('.destructive').addEventListener('click', function() {
      closeMenuSheet();
      setTimeout(() => {
        confirmModal.classList.add('active');
      }, 300);
    });
    
    // 关闭确认弹窗
    function closeConfirmModalFunc() {
      confirmModal.classList.remove('active');
    }
    
    closeConfirmModal.addEventListener('click', closeConfirmModalFunc);
    cancelDelete.addEventListener('click', closeConfirmModalFunc);
    
    // 确认删除
    confirmDelete.addEventListener('click', function() {
      closeConfirmModalFunc();
      alert('联系人已删除，返回通讯录');
    });
    
    // 初始化事件绑定
    backButtons[0].addEventListener('click', goBack);
    moreActionButtons[0].addEventListener('click', openMenuSheet);
    
    actionButtons.forEach(btn => {
      btn.addEventListener('click', handleActionButton);
    });
  </script>
</body>
</html>
